<template>
  <div class="full-height page-content bg-white">
    <public-filter
      ref="publicFilter"
      v-model="queryParams"
      :init="selfParams"
      @onSearchData="selfParams"
      :range="false"
      isShowProductSpecs
      :is-show-product="true"
      :is-show-devices="false"
      :is-workshop="true"
    >
      <div class="form-inline" style="flex :0;padding-bottom: 14px">
        <export-btn
          :disable="!tableData.length"
          :exportFun="exportFun"
          :exportParams="exportParams"
          :exportName="`产量报表${currentDate}.xls`"/>
      </div>
    </public-filter>
    <!-- 显示的table -->
    <q-table
      :data="tableData"
      :columns="[]"
      row-key="index"
      class="myTable flex-1 my-sticky-header-table scroll stick-first-col no-margin padding-l-20 padding-r-20"
      :hide-bottom="!!tableData.length"
      :pagination="{ rowsPerPage: 0 }"
      ref="reportTable"
      id="reportTable"
      separator="cell"
      :loading="tableLoading"
      color="primary"
    >
      <template v-slot:header>
        <q-tr>
          <q-th style="z-index: 100">
            加工产品
          </q-th>
          <q-th >
            产品规格
          </q-th>
          <q-th style="padding: 0">
            <div>
              <div v-if="currentDate" class="align-center item-height" :style="{'min-width': `${tableNameItem.length * 121 - 1}px`}">{{currentDate}}</div>
              <div class="flex">
                <div class="item border-top" style="min-width: 120px" :class="{'border-right': index !== tableNameItem.length - 1}" v-for="(item, index) in tableNameItem" :key="index">{{ item }}</div>
              </div>
            </div>
          </q-th>
        </q-tr>
      </template>
      <template v-slot:body="props">
        <tr>
          <td class="max-200 ellipsis">
            {{props.row.productName}}
            <q-tooltip>{{props.row.productName}}</q-tooltip>
          </td>
          <td class="ellipsis">
            <td-spec :rowData="props.row"/>
          </td>
          <td style="padding: 0" class="full-height">
            <div class="full-height flex" :class="{'border-bottom': props.row.processVOs.length - 1 !== processIndex}" v-for="(processVOItem, processIndex) in props.row.processVOs" :key="`processIndex${processIndex}`">
              <div class="item border-right items-center justify-center flex full-height" :style="{'height': processVOItem.shiftVOs.length * 48 + 'px!important'}">{{processVOItem.processName}}</div>
              <div class="flex column item border-right" style="width: 12.5%;padding: 0">
                <div class="ellipsis item-height full-width padding-10" :class="{'border-bottom': shiftIndex !== processVOItem.shiftVOs.length -1 }" v-for="(shiftItem, shiftIndex) in processVOItem.shiftVOs" :key="`shiftIndex${shiftIndex}1`">
                  {{shiftItem.shiftName}}
                  <q-tooltip>{{shiftItem.shiftName}}</q-tooltip>
                </div>
              </div>
              <div class="flex column item border-right" style="width: 12.5%;padding: 0">
                <div class="ellipsis item-height full-width padding-10" :class="{'border-bottom': shiftIndex !== processVOItem.shiftVOs.length -1 }" v-for="(shiftItem, shiftIndex) in processVOItem.shiftVOs" :key="`shiftIndex${shiftIndex}2`">{{shiftItem.planCount}}</div>
              </div>
              <div class="flex column item border-right" style="width: 12.5%;padding: 0">
                <div class="ellipsis item-height full-width padding-10" :class="{'border-bottom': shiftIndex !== processVOItem.shiftVOs.length -1 }" v-for="(shiftItem, shiftIndex) in processVOItem.shiftVOs" :key="`shiftIndex${shiftIndex}3`">{{shiftItem.actualCount}}</div>
              </div>
              <div class="flex column item border-right" style="width: 12.5%;padding: 0">
                <div class="ellipsis item-height full-width padding-10" :class="{'border-bottom': shiftIndex !== processVOItem.shiftVOs.length -1 }" v-for="(shiftItem, shiftIndex) in processVOItem.shiftVOs" :key="`shiftIndex${shiftIndex}4`">{{shiftItem.completionRate}}</div>
              </div>
              <div class="item border-right items-center justify-center flex full-height" :style="{'height': processVOItem.shiftVOs.length * 48 + 'px!important'}">{{processVOItem.planCount}}</div>
              <div class="item border-right items-center justify-center flex full-height" :style="{'height': processVOItem.shiftVOs.length * 48 + 'px!important'}">{{processVOItem.actualCount}}</div>
              <div class="item items-center justify-center flex full-height" :style="{'height': processVOItem.shiftVOs.length * 48 + 'px!important'}">{{processVOItem.completionRate}}</div>
            </div>
          </td>
        </tr>
      </template>
    </q-table>
    <yz-pagination v-model="pagination" @onSearch="getTableData(queryParams)"/>
  </div>
</template>

<script>
import publicFilter from 'src/pages/statistics/components/public-filter'
import moment from 'moment'
import _ from 'lodash'
import {
  getYieldReportDaily,
  // eslint-disable-next-line import/named
  getYieldReportDailyExcel,
  getYieldReportMonth,
  // eslint-disable-next-line import/named
  getYieldReportMonthExcel,
  getYieldReportWeek,
  // eslint-disable-next-line import/named
  getYieldReportWeekExcel
} from '../../../boot/job/quality-order'

export default {
  name: 'index',
  components: {
    publicFilter
  },
  data () {
    return {
      queryParams: {
        // 查询区条件
        dateRange: new Date(),
        excelDate: [],
        dateType: 'date',
        workshop: '',
        devices: [],
        product: []
      },
      tableData: [],
      tableNameItem: ['加工工序', '加工班次', '班次计划产量', '班次实际产量', '班次达成率', '计划产量', '实际产量', '达成率'],
      tableLoading: false,
      currentDate: '',
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 15, // 每页条数
        rowsNumber: 0 // 总条数
      },
      exportParams: {} // 请求数据
    }
  },
  computed: {
    exportFun () {
      if (this.queryParams.dateType === 'date') {
        return getYieldReportDailyExcel
      } else if (this.queryParams.dateType === 'month') {
        return getYieldReportMonthExcel
      } else if (this.queryParams.dateType === 'week') {
        return getYieldReportWeekExcel
      }
      return () => {}
    }
  },
  methods: {
    selfParams () {
      this.getTableData(this.queryParams)
    },
    getTableData (val) {
      const params = {
        productId: val.product ? [val.product] : '',
        workshopId: val.workshop,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.pageNum
      }
      this.queryParams.productSpec + '' !== '' && (params['productSpec'] = this.queryParams.productSpec)
      switch (this.queryParams.dateType) {
        case 'date':
          params.startDate = moment(val.dateRange).format('YYYY-MM-DD')
          params.endDate = params.startDate
          this.tableLoading = true
          this.exportParams = _.cloneDeep(params)
          getYieldReportDaily(params).then(res => {
            const data = res.data
            this.pagination.rowsNumber = data.total
            if (data.list?.length) {
              const info = data.list[0]
              this.currentDate = info.date
              this.tableData = info.productVOs
            } else {
              this.currentDate = ''
              this.tableData = []
            }
          }).finally(() => {
            this.tableLoading = false
          })
          break
        case 'week':
          params.startWeek = moment(val.dateRange).isoWeekYear() + '' + moment(val.dateRange).format('WW')
          params.endWeek = params.startWeek
          this.tableLoading = true
          this.exportParams = _.cloneDeep(params)
          getYieldReportWeek(params).then(res => {
            const data = res.data
            this.pagination.rowsNumber = data.total
            if (data.list?.length) {
              const info = data.list[0]
              this.currentDate = info.date
              this.tableData = info.productVOs
            } else {
              this.currentDate = ''
              this.tableData = []
            }
          }).finally(() => {
            this.tableLoading = false
          })
          break
        case 'month':
          params.startMonth = moment(val.dateRange).format('YYYYMM')
          params.endMonth = params.startMonth
          this.tableLoading = true
          this.exportParams = _.cloneDeep(params)
          getYieldReportMonth(params).then(res => {
            const data = res.data
            this.pagination.rowsNumber = data.total
            if (data.list?.length) {
              const info = data.list[0]
              this.currentDate = info.date
              this.tableData = info.productVOs
            } else {
              this.currentDate = ''
              this.tableData = []
            }
          }).finally(() => {
            this.tableLoading = false
          })
          break
      }
    }
  }
}
</script>

<style scoped lang="scss">
.item {
  padding: 0 10px;
  line-height: 48px;
  text-align: center;
  width: 12.5%;
}
.border-top {
  border-top: 1px solid #d3d3d3;
}
.border-bottom {
  border-bottom: 1px solid #d3d3d3;
}
.border-right {
  border-right: 1px solid #d3d3d3;
}
.fixed-width {
  width: 112px;
}
.fixed-width1 {
  width: 200px;
}
.fixed-width2 {
  width: 320px;
}
.align-center{
  text-align: center;
}
.line-height-2{
  line-height: 2;
}
.item-height{
  height: 48px;
  line-height: 48px;
}
.max-200{
  max-width: 200px;
}
.padding-10{
  padding: 0 10px
}
</style>
